import React, {Component} from 'react';
import {Alert, Button, StyleSheet, View} from 'react-native';

/** DES: 测试Button，继承Component之后的组件，都作为标签使用*/
export default class TestButtonComponent extends Component {
    // DES: 定义点击函数
    _onPressButton() {
        Alert.alert('Are you Ok?\n Hello,thank you,thank you very much');
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Button title={'ButtonOne'} onPress={this._onPressButton}/>
                </View>
                <View style={styles.buttonContainer}>
                    <Button title={'Press Me'} onPress={this._onPressButton} color={'#abcdef'}/>
                </View>
                <View style={styles.alternativeLayoutButtonContain}>
                    <Button title={'This Look Great!'} onPress={this._onPressButton}/>
                    <Button title={'Ok!'} onPress={this._onPressButton} color={'#841584'}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
        },
        buttonContainer: {
            margin: 20,
        },
        alternativeLayoutButtonContain: {
            margin: 20,
            flexDirection: 'row',
            justifyContent: 'space-between',
        },
    },
);
